<template>
    <div class="WsyjPowerStatistics" id="WsyjPowerStatistics"></div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import GVChartDataConvert from '@/util/GVChartDataConvert';
    import {chartServer} from '@/api/installServer';
    import publishObjectPath from '@/util/configRegistry';
const districtCode = publishObjectPath.value.districtCode;

    @Component
    export default class WsyjPowerStatistics extends Vue {
        private gvChart?: any;
        private data?: object;

        public mounted() {
            gv.config.ChartTemplate.load();
            // const source = new gv.source.SimpleSource(this.getData());
            const dom = document.getElementById('WsyjPowerStatistics');
            // const data = this.getData();
            // this.gvChart = new gv.chart.RoseRingPieChart(source, dom)
            // this.config();
            // this.gvChart.render();

            const url = '/resTeam/getResTeamCount';
            const that = this;
            chartServer.getConfig(url, {districtCode: districtCode}).then((result: any) => {
                if (result.data && result.status === 200 && result.data.code === 0 && result.data.data) {
                    that.data = result.data.data;
                    const source = new gv.source.SimpleSource(GVChartDataConvert.convert(that.data));
                    this.gvChart = new gv.chart.RoseRingPieChart(source, dom);
                    that.config();
                    that.gvChart.render();
                }

            });

        }

        private config() {
            const zr = this.gvChart.getZr();
            const cxs = zr.getWidth() / 2;
            const cys = zr.getHeight() / 2;

            this.gvChart.config('tooltip.formatter', function (val:any) {
                const names = Object.keys(val.data);
                return val.marker + val.name + ": " + val.data[names[1]];
            });
            this.gvChart.config('legend.show', false);
            this.gvChart.config('series[0].label', {
                fontSize: 14,
                formatter: '{one|{@1}人}\n{b}',
                rich: {
                    one: {
                        color: "#fff",
                        fontSize: 14
                    }
                }
            });
            this.gvChart.config('color', ['rgba(232,100,61,0.8)', 'rgba(143,239,210,0.8)', 'rgba(82,167,241,0.8)']);
            this.gvChart.config('graphic', {
                elements: [{
                    type: 'circle',
                    shape: {
                        cx: cxs,
                        cy: cys,
                        r: 85
                    },
                    style: {
                        fill: {
                            type: "radial",
                            x: 0.5,
                            y: 0.5,
                            r: 0.5,
                            colorStops: [
                                {offset: 0, color: 'rgba(84, 167, 239,0)'},
                                {offset: 0.85, color: 'rgba(84, 167, 239,0)'},
                                {offset: 1, color: 'rgba(84, 167, 239,0.6)'}
                            ],
                        }
                    }
                }]
            },);
        }

        private getData() {
            this.data = {
                items: [
                    {
                        entrys: [
                            {
                                name: 'x',
                                alias: '标题',
                                value: '地方支队',
                            },
                            {
                                name: 'a',
                                alias: '人数',
                                value: 320,
                            },
                        ],
                    },
                    {
                        entrys: [
                            {
                                name: 'x',
                                alias: '标题',
                                value: '部队支援',
                            },
                            {
                                name: 'a',
                                alias: '人数',
                                value: 260,
                            },
                        ],
                    },
                    {
                        entrys: [
                            {
                                name: 'x',
                                alias: '标题',
                                value: '当地队伍',
                            },
                            {
                                name: 'a',
                                alias: '人数',
                                value: 210,
                            },
                        ],
                    },
                ],
            };

            return GVChartDataConvert.convert(this.data);
        }
    }
</script>

<style scoped>
    .WsyjPowerStatistics {
        width: 100%;
        height: 100%;
    }
</style>
